<template>
	<view class="mine">
		<view class="uni-page-head train-nav">
			<view class="nav-top">
				<view></view>
				<view class="head-right">
					<image @tap='nocticeList()' src="../../static/images/mine/tip.png" mode="">
					</image>
					<image src="../../static/images/mine/scan.png" mode="" @tap="scan"></image>
					<image @tap="setting()" src="../../static/images/mine/she.png" mode="">
					</image>
				</view>
			</view>
			<view class="nav-title">
				<view class="t-left">
					<image :src="userImg" mode="" @tap="setting">
					</image>
				</view>
				<view class="t-right">
					<text class="t-title" @tap="setting">{{user.name}}</text>
					<text class="t-num" @tap="setting">工号:<text style="padding-left: 8px;">{{user.id}}</text></text>
					<view class="t-message">
						<text>学习圈帖子 <text style="padding-left: 8px;"> {{answerList ? answerList.learningCount : '--'}}</text></text>
						<text>答疑回复 <text style="padding-left: 8px;"> {{answerList ? answerList.AnsweringCount : '--'}}</text></text>
					</view>
				</view>
			</view>
			<view class="nav-content">
				<view class="c-top">
					<view class="t-item" @tap="integralCenter">
						<image src="../../static/images/mine/ji.png" mode=""></image>
						<text class="i-title">积分</text>
						<text style="font-size: 28rpx;">{{this.totalNum ? this.totalNum : '--'}}</text>
					</view>
					<view class="t-item">
						<image src="../../static/images/mine/answer.png" mode=""></image>
						<text class="i-title">答题量</text>
						<text style="font-size: 28rpx;">{{'--'}}</text>
					</view>
					<view class="t-item">
						<image src="../../static/images/mine/learn.png" mode=""></image>
						<text class="i-title">学习时长</text>
						<text style="font-size: 28rpx;">{{'--'}}  </text>
					</view>
					<view class="t-item">
						<image src="../../static/images/mine/eaxm.png" mode=""></image>
						<text class="i-title">考试次数</text>
						<text style="font-size: 28rpx;">{{'--'}}</text>
					</view>
				</view>
				<view class="c-bottom" @tap="integralCenter">
					<view class="b-left">
						<image src="../../static/images/mine/huan.png" mode=""></image>
						<text>积分中心</text>
					</view>
					<view class="b-right">
						学习赚积分 >
					</view>
				</view>
			</view>
			<view class="nav-other">
				<view class="o-title">
					其他
				</view>
				<view class="o-list">
					<view class="o-item" @click="go()">
						<image src="../../static/images/mine/phone.png" mode=""></image>
						<text>联系管理员</text>
					</view>
					<view class="o-item" @tap="myService()">
						<image src="../../static/images/mine/ke.png" mode=""></image>
						<text>我的客服</text>
					</view>
					<view class="o-item" @tap="share">
						<image src="../../static/images/mine/tui.png" mode=""></image>
						<text>推荐</text>
					</view>
					<view class="o-item" @tap="aboutSystem">
						<image src="../../static/images/mine/about.png" mode=""></image>
						<text>关于系统</text>
					</view>
					<view class="o-item" @tap="versionDescription">
						<image src="../../static/images/mine/new.png" mode=""></image>
						<text>版本说明</text>
					</view>
					<view class="o-item" @click="learningCircle">
						<image src="../../static/images/mine/quan.png" mode=""></image>
						<text>学习圈</text>
					</view>
					<view class="o-item" @tap="logoutHandler">
						<image src="../../static/images/mine/exit.png" mode=""></image>
						<text>退出登录</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight: 0,
				user: {},
				userImg: '../../static/images/user.png',
				totalNum: '',
				phone: '',
				statistics: {},
				answerList: {},
			}
		},
		onReady() {
			
		},
		onShow() {

		},
		methods: {
			// 推荐，分享给朋友
			share(){
				uni.navigateTo({
					url: '/pages/education-training/mine/shareFriends/shareFriends',
				});
			},
			// 联系管理员
			go() {
				getAdminInfo().then(res => {
					this.phone = res.value;
					
					uni.makePhoneCall({
					   // 手机号
					   phoneNumber: this.phone,
					   // 成功回调
					   success: (res) => {
					      console.log('调用成功!');
					   },
					   // 失败回调
					   fail: (res) => {
					      console.log('调用失败!');
					   },		
					});
				});
			},
			// 我的客服
			myService() {
				uni.navigateTo({
					url: '/pages/education-training/mine/myService/myService',
				});
			},
			// 版本说明
			versionDescription() {
				uni.navigateTo({
					url: '/pages/education-training/mine/versionDescription/versionDescription',
				});
			},
			// 关于系统
			aboutSystem() {
				uni.navigateTo({
					url: '/pages/education-training/mine/aboutSystem/aboutSystem',
				});
			},
			// 学习圈
			learningCircle() {
				uni.switchTab({
					url: '/pages/education-training/learningCircle/learningCircle',
				});
			},
			// 退出登录
			logoutHandler() {
				uni.removeStorageSync('TOKEN');
            
				uni.showModal({
					title: '警告',
					content: '是否退出登录',
					success: function(res) {
						if (res.confirm) {
							uni.reLaunch({
							   url: '/pages/login/login',
							});
						} else if (res.cancel) {
						}
					}
				});
			},
		},
	}
</script>

<style lang="scss" scoped>
	.mine {
		width: 100%;
		height: 96.8%;
		font-size: 24rpx;
		color: #4A4A4A;
		padding-bottom: 10px;
		background-color: #eee;

		image {
			width: 20px;
			height: 20px;
		}

		.train-nav {
			width: 100%;
			height: 220px;
			color: #fff;
			box-shadow: 0px 9px 7px #ccc;
			position: fixed;
			top: 0px;
			z-index: 99;
			background: linear-gradient(to right, #FE4F4F, #A81C1C);
			background-size: 100% 100%;

			.nav-top {
				margin-top: 28px;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.head-right {
					padding-right: 20px;
					margin-top: 10px;

					image {
						width: 16px;
						height: 16px;
						margin-left: 16px;
					}
				}
			}

			.nav-title {
				width: 100%;
				margin: 20px;
				display: flex;
				align-items: center;

				.t-left {
					width: 150rpx;
					height: 150rpx;
					margin-right: 21rpx;
					image {
						border-radius: 50%;
						width: 150rpx !important;
						height: 150rpx !important;
						// margin-right: 36rpx;
					}
				}

				.t-right {
					width: 66%;

					.t-title {
						font-size: 28rpx;
						padding-left: 16px;
						display: block;
					}

					.t-num {
						display: inline-block;
						padding-left: 16px;
						font-size: 22rpx;
						margin: 8px 0px;
						color: #ccc;
					}

					.t-message {
						width: 100%;
						height: 36px;
						padding: 0px 20px;
						box-sizing: border-box;
						border-radius: 20px;
						font-size: 24rpx;
						display: flex;
						justify-content: space-around;
						align-items: center;
						background-color: #FF8787;
					}
				}
			}

			.nav-content {
				width: 90%;
				margin: 0 auto;
				padding: 10px 10px 0px 10px;
				box-sizing: border-box;
				border-radius: 10px;
				background-color: #fff;

				.c-top {
					padding: 20px 10px;
					box-sizing: border-box;
					border-bottom: 1px solid #E4E4E4;
					display: flex;
					justify-content: space-between;

					.t-item {
						width: 50px;
						display: flex;
						flex-direction: column;

						image {
							width: 20px;
							height: 20px;
							vertical-align: middle;
							margin-left: 16px;
						}

						text {
							text-align: center;
							color: #4A4A4A;
						}

						.i-title {
							font-size: 22rpx;
							color: #aaa;
							display: inline-block;
							margin: 4px 0px;
						}
					}
				}

				.c-bottom {
					padding: 10px;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.b-left {
						display: flex;
						align-items: center;
						color: #4A4A4A;

						image {
							width: 46rpx;
							height: 46rpx;
							margin-right: 10px;
						}
					}

					.b-right {
						color: #F6C021;
						font-size: 24rpx;
					}
				}

			}

			.nav-other {
				width: 90%;
				margin: 0 auto;
				color: #4A4A4A;

				.o-title {
					font-size: 26rpx;
					margin: 16px 0px 0px 0px;
				}

				.o-list {
					margin-top: 10px;
					padding: 10px;
					box-sizing: border-box;
					display: flex;
					flex-wrap: wrap;
					background-color: #fff;

					.o-item {
						width: 25%;
						display: flex;
						flex-direction: column;
						align-items: center;
						font-size: 22rpx;

						image {
							width: 60rpx;
							height: 60rpx;
							margin: 20px 0px 6px 0px;
						}
					}
				}
			}
		}
	}
</style>
